export const drag = {
  methods: {
    // 缩放
    rollImg(ev) {
      var imgWrap = this.$refs.bigImage;
      var oEvent = ev || ev.event;
      //缩小之前的值
      var oldWidth = imgWrap.offsetWidth;
      var oldHeight = imgWrap.offsetHeight;
      let oldLeft = imgWrap.style.left.replace(/\px/g, '')
      let oldTop = imgWrap.style.top.replace(/\px/g, '')
      //距离窗口的值
      let parentLeft = imgWrap.getBoundingClientRect().left;
      let parentTop = imgWrap.getBoundingClientRect().top;
      //缩小比例
      let scaleX = (oEvent.clientX - parentLeft) / oldWidth; // 比例
      let scaleY = (oEvent.clientY - parentTop) / oldHeight;
      var down = true;
      if (oEvent.detail) {
        down = oEvent.detail > 0;
      } else {
        down = oEvent.wheelDelta < 0;
      }
      if (oEvent.preventDefault) {
        oEvent.preventDefault();
      }
      if (down) {
        imgWrap.style.width = parseInt(imgWrap.offsetWidth * 0.9) + "px";
        imgWrap.style.height = parseInt(imgWrap.offsetHeight * 0.9) + "px";
      } else if (!down) {
        imgWrap.style.width = parseInt(imgWrap.offsetWidth * 1.1) + "px";
        imgWrap.style.height = parseInt(imgWrap.offsetHeight * 1.1) + "px";
      }
      //修改完宽高后，计算位置
      imgWrap.style.left = Math.round(oldLeft - scaleX * (imgWrap.offsetWidth - oldWidth)) + "px";
      imgWrap.style.top = Math.round(oldTop - scaleY * (imgWrap.offsetHeight - oldHeight)) + "px";
    },

    // 拖拽
    drag(env) {
      env.preventDefault()
      // 获取元素
      let imgWrap = this.$refs.bigImage
      let styL = imgWrap.style.left.replace(/\px/g, '')
      let styT = imgWrap.style.top.replace(/\px/g, '')
      let x = env.pageX - styL
      let y = env.pageY - styT
      // 添加鼠标移动事件
      document.onmousemove = function move(e) {
        imgWrap.style.left = e.pageX - x + 'px'
        imgWrap.style.top = e.pageY - y + 'px'
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
}